<template>
    <div class="person">
        <h2>当前求和为：{{ sum }}</h2>
        <button @click="changeSum">自增1</button>

        <h2>用户信息1：{{ person.name }} {{ person.age }}</h2>
        <h2>用户信息2：{{ person2.name }} {{ person2.age }}</h2>
        <h2>用户信息3：{{ person3.name }} {{ person3.age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeInfo">修改用户</button>
        
    </div>
</template>

<script lang="ts" setup>
    import { watch, ref, reactive, watchEffect } from 'vue';
    let sum = ref(0)
    let person = ref({name:'zhang',age:18})
    let person2 = reactive({name:'wu',age:23})
    let person3 = reactive({name:'zhong',age:44})
    //监视情况一，监视【ref】定义的【基本类型】数据
    const stopWatch = watch(sum, (newValue, oldValue) => {
        console.log('sum变化了', newValue, oldValue)
        if(newValue > 10) {
            stopWatch()
        }
    })
    function changeSum() {
        sum.value++
    }
    function changeName() {
        person.value.name += '~'
        person2.name += '~'
        person3.name += '~'
    }
    function changeAge() {
        person.value.age++
        person2.age++
        person3.age++
    }
    function changeInfo() {
        person.value={name:'li',age:81}
        Object.assign(person2,{name:'liyuan',age:99})
        Object.assign(person3,{name:'liyuanwu',age:11})
    }
    //监视情况二，监视【ref】定义的【对象类型】数据,监视的是对象的地址，修改deep属性可以监视内部属性变化，但是新值和旧值一致。
    watch(person, (newValue, oldValue) => {
        console.log('person变化了', newValue, oldValue)
    },{deep:true,immediate:false})
    //监视情况三，监视【reactive】定义的【对象类型】数据,隐式地开启了深度监视，无法修改通过deep属性修改，但是新值和旧值一致。
    watch(person2, (newValue, oldValue) => {
        console.log('person2变化了', newValue, oldValue)
    },{deep:false})
    //监视情况四，监视【reactive或ref】定义的【对象类型】的属性,基本类型需要写成函数，对象类型建议写成函数，否则对象整体变化时无效，如果需要监视内部属性变化，通过deep属性修改。
    watch(()=> person3.name, (newValue, oldValue) => {
        console.log('person3.name变化了', newValue, oldValue)
    },{deep:true})
    //监视情况五，监视上述的多个数据
    watch([()=> person3.name, person2], (newValue, oldValue) => {
        console.log('person3.name 或者 person2 变化了', newValue, oldValue)
    },{deep:true})
    //监视 -- watchEffect实现,函数中使用什么属性，就监听什么属性。
    watchEffect(()=>{
        if (sum.value > 10) {
            console.log("监视一切！")
        }
    })

</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>